<template>
  <div>
    需要我审批的工单:
    <div
      v-for="item in examines"
      :key="item.id"
      class='box'
    >
      创建时间:{{item.c_time}} <br>
      工单内容: <br>
      <span
        v-for="field in item.content"
        :key="field.label"
        style="margin: 10px;"
      >
        <label>{{field.label}}:</label> <span>{{field.value}}</span>
      </span> <br>
      审批人列表:
      <div
        v-for="f in item.flow"
        :key="f.id"
      >
        审批人: {{f.user.username}}
        审批状态:{{f.status | status_str}}
        <template v-if="yes_no(item.id, f.user.id)">
          意见: <input
            type="text"
            v-model='comment'
          >
          <button @click="set_instance(item.id, 1)">同意</button>
          <button @click="set_instance(item.id, 2)">不同意</button>
        </template>
        <template v-else>意见: {{f.comment}}</template>

      </div>
    </div>

  </div>
</template>

<script>
import Axios from 'axios'
import Template from './Template.vue'
export default {
  components: { Template },
  data() {
    return {
      token: localStorage.token || '',
      username: localStorage.username || '',
      uid: localStorage.uid || '',
      examines: [],
      comment: ''
    }
  },
  created() {
    this.get_instances()
  },
  methods: {
    get_instances() {
      Axios.get('/myexamine/', {
        headers: {
          Authorization: 'JWT ' + this.token
        }
      }).then(resp => {
        console.log(resp)
        this.examines = resp.data
        this.examines.map(item => {
          item.content = JSON.parse(item.content)
        })
      })
    },
    set_instance(instance_id, status) {
      // 设置审批状态, 
      Axios.post('/myexamine/', {
        instance_id: instance_id,
        status: status,
        comment: this.comment
      }, {
        headers: {
          Authorization: 'JWT ' + this.token
        }
      }).then(resp => {
          this.$router.go(0)
      })
    },
    yes_no(instance_id, flow_user_id) {
      if (flow_user_id == this.uid) { } else { return false }
      // 找到那个工单
      var the = this.examines.find(item => item.id == instance_id)
      // 找到我在工单审批流中的位置
      var theflow = the.flow.find(item => item.user.id == this.uid)
      // debugger
      if (theflow.seq == 1) {
        // 如果顺序是1, 并且status是0
        if (theflow.status == 0) {
          return true
        }

      } else { // 如果位置,不是1, 
        if (theflow.status == 0) {  // 我没有处理
          var theflow_qian = the.flow.find(item => item.seq == theflow.seq - 1)
          // 前一个审批人
          if (theflow_qian.status == 1) { // 前一个审批人审批状态是1 同意
            return true
          } else {
            return false
          }
        } else {
          return false
        }
      }
      return false
    }
  },
  filters: {
    status_str(value) {
      var d = {
        0: '未处理',
        1: '同意',
        2: '不同意'
      }
      return d[value]
    }
  }
}
</script>

<style>
.box {
  border: 1px solid red;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 50%;
}
</style>